<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lsj
  Date: 2022/12/30
  Time: 16:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查看物品</title>
    <style type="text/css">
        html{
            overflow-y: scroll;
            padding-right:10px;
            height: 600px;
        }

        a{
            text-decoration: none;
            outline: none;
        }
        ul,div{
            margin: 0;
            padding: 0;
            list-style-type: none;
            border: 0;
        }
        .total{
            position: absolute;
            top: 250px;
            left: 170px;
        }
        #ul01 #li01{
            height: 242px;
            width: 960px;
            position: relative;
            background: #fff;
            transition: all .2s ease-in-out;
            padding-left: 20px;
        }
        #li01 #a01{
            position: absolute;
            left: 20px;
            top: 21px;
            display: block;
            width: 200px;
            height: 200px;
        }
        #a01 img{
            margin: 0;
            padding: 0;
            list-style-type: none;
            border: 0;
        }
        #li01 .p01{
            position: absolute;
            left: 240px;
            top: 21px;
            line-height: 20px;
            height: 20px;
            width: 720px;
            overflow: hidden;
        }
        .p01 #a02{
            font-size: 14px;
            color: #1a66b3;
            font-family: simsun;
        }
        #a02 .span01{
            color: #c30;
        }
        #li01 .p02{
            position: absolute;
            left: 240px;
            top: 48px;
            font-family: "arial";
            line-height: 30px;
            width: 720px;
        }
        .p02 .span02{
            color: #ff2832;
            font-size: 18px;
            font-weight: bold;
        }
        #li01 .p03{
            position: absolute;
            left: 245px;
            top: 75px;
            color: #787878;
            line-height: 30px;
            height: 30px;
            overflow: hidden;
            overflow: hidden;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 12px;

        }

        .p03 .span03{
            color: #787878;
            line-height: 30px;
            word-break: break-all;
            word-wrap: break-word;
            padding-top: 8px;
        }

        #li01 .p04{
            position: absolute;
            left: 245px;
            top: 97px;
            font-size: 12px;

        }

        .p04 .span04{
            height: 16px;
            line-height: 16px;
            font-style: normal;
            display: inline-block;
            vertical-align: middle;
            color: #1a66b3;
            font-family: 微软雅黑;
            cursor: pointer;
            padding-top: 8px;
        }

        #li01 .p05{
            position: absolute;
            left: 245px;
            top: 126px;
        }

        .p05 .span05{
            display: inline-block;
            width: 12px;
            height: 13px;
            overflow: hidden;
            background: url("${pageContext.request.contextPath}/image/price.png") -43px -213px;
            position: relative;
            margin-right: 8px;
        }
        .p05 .a03{
            color: #646464;
            font-size: 12px;
        }

        .shop_button{
            position: relative;
        }

        .shop_button .p06{
            position: absolute;
            left: 222px;
            top: 173px;
        }

        .p06 .a04{
            width: 100px;
            height: 28px;
            line-height: 28px;
            background: #ff2832;
            border-radius: 3px;
            display: inline-block;
            *display: inline;
            zoom: 1;
            color: #fff;
            text-align: center;
            font-family: 'Microsoft Yahei';
            font-size: 14px;
            margin-right: 10px;
        }

        .p06 .a05{
            width: 80px;
            height: 28px;
            line-height: 28px;
            background: #ffedee;
            color: #ff2832;
            border: 1px solid #ff2832;
            display: inline-block;
            border-radius: 3px;
            text-align: center;
            font-family: 'Microsoft Yahei';
            font-size: 14px;
            margin-right: 10px;
        }








        #button_1{
            width:200px;
            height:100px;
        }
        #minPrice{
            border: solid 1px #e1e1e1;
            padding: 2px 0 2px 13px;
            margin: 0;
            line-height: 18px;
            height: 18px;
            width: 50px;
            color: #878787;
            outline: none;
            background: #fff url("${pageContext.request.contextPath}/image/price.png") -45px -169px no-repeat;
        }
        #maxPrice{
            border: solid 1px #e1e1e1;
            padding: 2px 0 2px 13px;
            margin: 0;
            line-height: 18px;
            height: 18px;
            width: 50px;
            color: #878787;
            outline: none;
            background: #fff url("${pageContext.request.contextPath}/image/price.png") -45px -169px no-repeat;
        }
        #PriceRange{
            position: absolute;
        }
        .priceR .button_1{
            margin-left: 70px;
        }
        .search{
            position: absolute;
            margin-top: 20px;
            height: 48px;
            z-index: 9999;
            left: 362px;
            top: 0;
        }

        .search input{
            width: 398px;
            height: 40px;
            border: 2px solid #ff2832;
            border-right: none rgb(255, 40, 50);
            padding: 9px 0 9px 10px;
            position: absolute;
            left: 130px;
            top: 0;
            z-index: 2;
            color: #323232;
            font: 12px/18px 'Hiragino Sans GB',"simsun",Arial;
            outline: 0;
            background: none;
        }

        .search button:hover{
            background: url(//img63.ddimg.cn/upload_img/00459/home/head_sprite.png) no-repeat 0 -390px;
        }

        .search button{
            width: 48px;
            height: 40px;
            border: none;
            background: url(//img63.ddimg.cn/upload_img/00459/home/head_sprite.png) no-repeat 0 -346px;
            cursor: pointer;
            position: absolute;
            left: 517px;
            top: 0;
        }

        #sales input{
           display: none;
        }

        #price input{
            display: none;
        }

        #comprehensive input{
            display: none;
        }

        #WellReceived input{
            display: none;
        }
        #bookName{
            display: none;
        }

        .top{
            height: 30px;
            border: solid 1px #efefef;
            position: relative;
            top: 200px;
            left: 200px;
            width: 500px;
            z-index: 1001;
            line-height: 30px;
            background-color: #f5f5f5;
        }
        .top ul{
            float: left;
        }
        .top ul li{
            float: left;
            background-position: right -97px;
            cursor: pointer;
            margin-left: -1px;
            background-repeat: no-repeat;
            height: 30px;
        }
        .top button{
            color: #555;
            border: none;
        }
        .top button:hover{
            color: #fd5115;
        }
        .top .comprehensive,.WellReceived,.asc,.desc{
            display: block;
            text-align: center;
            padding: 2px 10px 0;
            line-height: 28px;
            height: 30px;
            font-size: 12px;
            float: left;
        }

        .top .sales{
            display: block;
            text-align: center;
            padding: 2px 10px 0;
            line-height: 28px;
            font-size: 12px;
        }

         .top li .icon{
             display: inline-block;
             height: 11px;
             width: 7px;
             margin-left: 5px;
             overflow: hidden;
             vertical-align: middle;
             background: url("${pageContext.request.contextPath}/image/price.png") 0 -195px;
         }
         .priceR .span06{
             font-size: 12px;
             color: #555;
         }


    </style>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>


<%--            查询某个书籍--%>
            <div class="search">
                <form action="find" method="post" style="float:left" >
                    <input type="text" name="bookName" placeholder="请输入查询书籍的名称" value="${param.bookName}">
                    <button type="submit"></button>

                </form>
            </div>

            <div class="top">
                <ul>
                    <li>
                        <form action="comprehensive" method="post" id="comprehensive">
                            <input type="text"  name="bookName" value="${param.bookName}">
                            <button type="submit" class="comprehensive">综合评分</button>
                        </form>
                    </li>

                    <li>
                        <form action="sales" method="post" style="float:left" id="sales">
                            <input type="text"  name="bookName" value="${param.bookName}">
                            <button type="submit"  name="priceASC" class="sales">销量  <span class="icon"></span></button>
                        </form>
                    </li>

                    <li>
                        <form action="WellReceived" method="post" style="float:left" id="WellReceived">
                            <input type="text"  name="bookName" value="${param.bookName}">
                            <button type="submit"  name="WellReceived" class="WellReceived">好评   <span class="icon"></span></button>


                        </form>
                    </li>

                    <li>
                        <form action="asc" method="post" style="float:left" id="price">
                            <input type="text"  name="bookName" value="${param.bookName}">
                            <button type="submit"  name="priceASC" class="asc">价格升序</button>
                            <button type="submit" name="priceDESC" class="desc" formaction="desc">价格降序</button>
                        </form>
                    </li>

                    <li>
                        <form action="PriceRange" method="post" name="Price" onsubmit="return x()" id="PriceRange">
                            <div id="priceR" class="priceR">
                                <input type="text"  id="bookName" name="bookName" value="${param.bookName}">
                                <span class="span06">价格区间</span>
                                <input type="text"  id="minPrice" name="minPrice" onfocus="price1()" value=" <%=request.getParameter("minPrice") == null?"":request.getParameter("minPrice")%>">
                                <span>-</span>
                                <input type="text"  id="maxPrice" name="maxPrice" onfocus="price1()" value=" <%=request.getParameter("maxPrice") == null?"":request.getParameter("maxPrice")%>">
                                <div id="button_1" style="display:none;" class="button_1">
                                    <button type="submit" id="yes" >确定</button>
                                    <button type="reset" id="no" >清除</button>
                                </div>
                            </div>

                        </form>
                    </li>

                    <li>

                    </li>
                </ul>

            </div>



                <div class="total">
                <c:forEach items="${books}" var="b">
                <div id="div01">
                    <ul id="ul01">
                        <li id="li01">
                            <a href="" id="a01"><img src="${pageContext.request.contextPath}${b.bookPicture}"></a>
                            <p class="p01">
                                <a href="" id="a02">
                                    <span class="span01">${b.bookName}</span>
                                        ${b.kind}
                                </a>
                            </p>
                            <p class="p02">
                                <span class="span02">￥${b.price}</span>
                            </p>
                            <p class="p03">
                                <span class="span03">
                                        ${b.author} / ${b.pubDate} / ${b.publisher}
                                </span>
                            </p>
                            <p class="p04">
                                <span class="span04">
                                        评分: ${b.score}  销量:${b.sales}
                                </span>
                            </p>

                            <p class="p05">
                                <span class="span05"></span>
                                <a href="" class="a03">${b.seller}</a>
                            </p>

                            <div class="shop_button">
                                <p class="p06">
                                    <a class="a04" href="">
                                        加入购物车
                                    </a>
                                    <a class="a05" href="">
                                        收藏
                                    </a>
                                </p>
                            </div>
                        </li>
                    </ul>


                </div>
                </c:forEach>
                </div>




<script type="text/javascript">
    function x(){
        var minPrice = document.forms["Price"]["minPrice"].value;
        var maxPrice = document.forms["Price"]["maxPrice"].value;
        if(minPrice == null){
            alert("未输入最低价");
            return  false;
        }
        if(maxPrice == null){
            alert("未输入最高价");
            return false;
        }
        if(minPrice <=0 || maxPrice <=0){
            alert("输入的价格不能小于零，请重新输入");
           return  false;

        }
        if(minPrice > maxPrice){
            alert("最低价格不能大于最高价格，请重新输入");
            return false;
        }
    }

    function price1(){
        var div1= document.getElementById('button_1');
        div1.style.display = 'block';
    }

    function price2(){
        var div1 = document.getElementById('button_1');
        div1.style.display = 'none';
    }
    window.onload=function(){
        var button_1 = document.getElementById("button_1");
        var priceR = document.getElementById("priceR");
        document.addEventListener("click",function(){
            button_1.style.display="none";
        });
        priceR.addEventListener("click",function(event){
            event=event||window.event;
            event.stopPropagation();
        });
    };



</script>
</body>
</html>
